<template>
  <div class="container">
    <el-row class="search_div" style="margin-bottom: 12px;">
      <repair-mag-form @parkBoolean="receivePark"
                       @roadBoolean="receiveRoad"
                       @tableLoad="setTableLoad"
                       @tableData="getTableData"
                       :ranNum="ranNum"
                       :park="parkName"
                       :road="roadName"
                       :pageNum="pageNum"
                       :pageSize="pageSize"></repair-mag-form>
    </el-row>
    <el-row class="search_div" style="background-color: #1B4685">
      <repair-mag-table @addBerth="openAdd"
                        @editBerth="openEdit"
                        @pageNum="setPageNum"
                        @pageSize="setPageSize"
                        @delSearch="tiggerSearch"
                        :tableLoad="tableLoad"
                        :tableData="tableData"></repair-mag-table>
    </el-row>
    <repair-mag-add :addBerthVisible.sync="addBerthVisible"
                    :parkName2.sync="parkName2"
                    :roadName2.sync="roadName2"
                    @openParkAdd="receivePark2"
                    @openRoadAdd="receiveRoad2"></repair-mag-add>
    <repair-mag-edit :editBerthVisible.sync="editBerthVisible"
                     :parkName3.sync="parkName3"
                     :editData="editData"
                     :roadName3.sync="roadName3"
                     @editSearch="tiggerSearch"
                     @openParkEdit="receivePark3"
                     @openRoadEdit="receiveRoad3"></repair-mag-edit>
  </div>
</template>
<script>
  /* eslint-disable */

  import RepairMagForm from "./mainManagChild/repairMagForm";
  import RepairMagTable from "./mainManagChild/repairMagTable";
  import RepairMagAdd from "./mainManagChild/repairMagAdd";
  import RepairMagEdit from "./mainManagChild/repairMagEdit";

  export default {
    components: {
      RepairMagEdit,
      RepairMagAdd,
      RepairMagTable,
      RepairMagForm
    },
    data() {
      return {
        tableData: {},
        editData: [],
        pageNum: 1,
        pageSize: 10,
        tableLoad: false,
        dialogParkVisible: false,
        dialogRoadVisible: false,
        addBerthVisible: false,
        editBerthVisible: false,
        parkLoading: false,
        roadLoading: false,
        ranNum: 0,
        parkType: 0,
        roadType: 0,
        parkName: '',
        parkName2: '',
        parkName3: '',
        roadName: '',
        roadName2: '',
        roadName3: ''
      }
    },
    methods: {
      receivePark: function (val) {
        this.parkType = 1
        this.parkLoading = val
        this.dialogParkVisible = val
      },
      receivePark2: function (val) {
        this.parkType = 2
        this.parkLoading = val
        this.dialogParkVisible = val
      },
      receivePark3: function (val) {
        this.parkType = 3
        this.parkLoading = val
        this.dialogParkVisible = val
      },
      receiveRoad: function (val) {
        this.roadType = 1
        this.roadLoading = val
        this.dialogRoadVisible = val
      },
      receiveRoad2: function (val) {
        this.roadType = 2
        this.roadLoading = val
        this.dialogRoadVisible = val
      },
      receiveRoad3: function (val) {
        this.roadType = 3
        this.roadLoading = val
        this.dialogRoadVisible = val
      },
      selectParkName: function (val) {
        if (this.parkType === 1) {
          this.parkName = val
        } else if (this.parkType === 2) {
          this.parkName2 = val
        } else if (this.parkType === 3) {
          this.parkName3 = val
        } else {
          console.log()
        }
      },
      selectRoadName: function (val) {
        if (this.roadType === 1) {
          this.roadName = val
        } else if (this.roadType === 2) {
          this.roadName2 = val
        } else if (this.roadType === 3) {
          this.roadName3 = val
        } else {
          console.log()
        }
      },
      openAdd: function (val) {
        this.addBerthVisible = val
      },
      openEdit: function (val) {
        this.editData = val[0]
        this.editBerthVisible = val[1]
      },
      /* 执行完操作后触发查询 */
      tiggerSearch: function (val) {
        this.ranNum = val
      },
      setPageNum: function (val) {
        this.pageNum = val
      },
      setPageSize: function (val) {
        this.pageSize = val
      },
      setTableLoad: function (val) {
        this.tableLoad = val
      },
      getTableData: function (val) {
        this.tableData = val
      }
    }
  }
</script>
<style scoped>
  .container {
    padding-top: 10px;
    padding-left: 17px;
    padding-right: 17px;
    padding-bottom: 42px;
    height: 96vh;
    background-color: #1A4380;
  }
  .search_div{
    background: #1B4685;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.20);
    border-radius: 2px 2px 2px 2px;
  }
</style>
